<template>
	<view class="">
		<view style="color:green;">
			视频流👇
		</view>
		<video  id="remoteVideo" :show-center-play-btn="false" :show-play-btn="false"
			:show-progress="false" :style="{height:playHeight+'px'}"  style="width: 100%;"
			 :muted="false" :autoplay="true" />
		<view style="color:blue;">
			音频流👇
		</view>
		<video  id="remoteAudio" :show-center-play-btn="false" :show-play-btn="false"
						:show-progress="false" :style="{height:playHeight+'px'}"  style="width: 100%;"
						:muted="false" :autoplay="true" />
<!--				<view style="font-size:28px;font-weight: bold;margin-bottom:50px">-->
<!--					是否支持H264：<view style="display:inline">{{isH264}}</view>-->
<!--				</view>-->
<!--				<view style="font-size:28px;font-weight: bold;margin-bottom:50px">-->
<!--					手机型号： <view style="display:inline">{{phoneType}}</view>-->
<!--				</view>-->
<!--				<view style="font-size:28px;font-weight: bold">-->
<!--					手机系统： <view style="display:inline">{{phoneSys}}</view>-->
<!--				</view>-->
		<view style="display: flex;align-items: center;justify-content: center;">
			<button class="block radius-btn" style="width: 350rpx" @tap="GetPlayUrl" type="primary">获取设备直播URL</button>
			<button class="block radius-btn" style="width: 350rpx" @tap="GetTalkUrl" type="primary">获取设备对讲URL</button>
		</view>
		<view style="width: 100%;height: 150rpx">
			Play URL👇
				<textarea style="background-color:black; color: #FFFFFF;height: 100rpx;width: 100%;" name="" id="" cols="40" rows="10" v-model.trim="playUrlInput"></textarea>
		</view>
		<view style="display: flex;align-items: center;justify-content: center;">
			<button class="block radius-btn" style="width: 200rpx" @tap="call" type="operation" :disabled="callButtonDisabled">开始视频</button>
			<button class="block radius-btn" style="width: 200rpx" @tap="hangup" type="primary" :disabled="hangupButtonDisabled">挂断视频</button>
		</view>
		<view style="width: 100%;height: 150rpx">
			Talk URL👇
			<view >
				<textarea style="background-color:black; color: #FFFFFF;height: 100rpx;width: 100%;" name="" id="" cols="40" rows="10" v-model.trim="talkUrlInput"></textarea>
			</view>
		</view>
		<view style="display: flex;align-items: center;justify-content: center;">
			<button class="block radius-btn" style="width: 200rpx" @tap="setTalkEnable" type="operation" :disabled="startTalkButtonDisabled">开始对讲</button>
			<button class="block radius-btn" style="width: 200rpx" @tap="setTalkDisable" type="primary" :disabled="stopTalkButtonDisabled">结束对讲</button>
		</view>
	</view>
</template>

<script>
import {webrtc} from "./mixins/webrtc";
	export default {
		mixins:[webrtc],
		data() {
			return {
				videAoutoplay: false, //自动播放
				videMuted: true, //静音
				videoPlayUrl: '',
				playHeight: '',
			};
		},
		onLoad(options) {
			// this.getPhoneType()
		},
		onShow() {
			this.getClineHeight()
		},
		onHide() {
		},
		onUnload() {
		},
		methods: {
			getPhoneType(){
				const phone = uni.getSystemInfoSync()
				this.phoneType = phone.deviceModel
				this.phoneSys = phone.system
				console.log(phone)
			},
			videoPlay(e){
				console.log(e)
			},
			videoErro(e){
				console.log(e)
			},
			getClineHeight() {
				uni.getSystemInfo({
					success: (res => {
						this.playHeight = res.windowHeight - 600
					})
				});
			},
		// 	webRtc------------------------------
		}
	};
</script>

<style>
</style>